/*
 * @Author: silas 
 * @Date: 2021-05-07 16:39:06 
 * @Last Modified by: silas
 * @Last Modified time: 2021-07-15 15:49:00
 */
<template>
    <div class="tobBtoC">
        <div class="contentTopTitle">
            <div class="title">预估偏差统计</div>
        </div>
        <div>
            <el-form
                :inline="true"
                :model="form"
                label-width="60px"
                class="formList"
            >
                <el-form-item label="账期" style="width: 20%" >
                    <el-date-picker
						@change="handle_time"
                        v-model="form.time"
                        type="month"
                        placeholder="选择账期"
                        value-format="yyyyMM"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="版本集合" style="width: 20%">
					<el-select v-model="form.fcDate">
						<el-option v-for="(it, i) in fcDate" :key="i" :label="it" :value="it"></el-option>
					</el-select>
                </el-form-item>
                <el-form-item>
                    <el-button
                        style="margin-left: 20px"
                        size="mini"
                        type="primary"
                        @click="handle_search"
                        >查询</el-button
                    >
					<el-button size="mini" type="orange" @click="handle_export">
						导出
					</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="table-content clearfix">
            <p class="g-unit">单位: 万元</p>
            <div class="content" style="margin-top: 0;">
                <div class="tableBox">
                    <el-table
						id="table"
                        v-loading="tableLoading"
                        :data="tableData"
                        style="width: 100%"
                        class="tableTh28"
                        border
                        stripe
                        ref="table"
                    >
                        <el-table-column min-width="90" label="收入账期" prop="acctMonth" />
                        <el-table-column min-width="90" label="填报版本" prop="fcDate" />
                        <el-table-column min-width="90" label="填报单位" prop="areaName" />
                        <el-table-column min-width="110" label="填报部门" prop="dname" />
                        <el-table-column min-width="90" label="填报人员" prop="staffName" />
						<el-table-column label="预估">
                            <el-table-column min-width="110" label="主营收入合计" prop="zySr"></el-table-column>
                            <el-table-column label="基本面">
                                <el-table-column min-width="110" label="基本面小计" prop="jbmSr"></el-table-column>
								<el-table-column min-width="110" label="码号收入小计" prop="mhSr"></el-table-column>
								<el-table-column min-width="110" label="台阶收入小计" prop="tjSr"></el-table-column>
								<el-table-column min-width="110" label="四大主量" prop="sdzlSr"></el-table-column>
								<el-table-column min-width="110" label="移动收入" prop="ydSr"></el-table-column>
								<el-table-column min-width="110" label="普通宽带" prop="ptkdSr"></el-table-column>
								<el-table-column min-width="110" label="互联网专线" prop="hlwzxSr"></el-table-column>
                                <el-table-column min-width="110" label="天翼高清" prop="tygqSr"></el-table-column>
                                <el-table-column min-width="110" label="固话收入" prop="ghSr"></el-table-column>
								<el-table-column min-width="110" label="智慧家庭" prop="zhjtSr"></el-table-column>
								<el-table-column min-width="110" label="组网专线" prop="zwzxSr"></el-table-column>
								<el-table-column min-width="110" label="设施出租" prop="ssczSr"></el-table-column>
								<el-table-column min-width="110" label="物联网" prop="wlwSr"></el-table-column>
								<el-table-column min-width="110" label="号百收入" prop="hbSr"></el-table-column>
								<el-table-column min-width="110" label="其他收入" prop="qtSr"></el-table-column>
                            </el-table-column>
                            <el-table-column label="DICT">
									<el-table-column min-width="110" label="DICT小计" prop="dictSr"></el-table-column>
									<el-table-column min-width="110" label="ICT收入" prop="ictSr"></el-table-column>
									<el-table-column min-width="110" label="IDC收入" prop="idcSr"></el-table-column>
							</el-table-column>
                            <el-table-column label="重点产品">
									<el-table-column min-width="110" label="产业数字化" prop="cyszhSr"></el-table-column>
									<el-table-column min-width="110" label="智云护航" prop="zyhhSr"></el-table-column>
									<el-table-column min-width="110" label="天翼云" prop="tyySr"></el-table-column>
							</el-table-column>
                            <el-table-column label="用户数">
									<el-table-column min-width="110" label="移动出账用户" prop="ydczYh"></el-table-column>
									<el-table-column min-width="110" label="宽带计费用户" prop="kdjfYh"></el-table-column>
							</el-table-column>
						</el-table-column>
						<el-table-column label="偏差值">
                            <el-table-column min-width="110" label="主营收入合计" prop="zySrPc"></el-table-column>
                            <el-table-column label="基本面">
                                <el-table-column min-width="110" label="基本面小计" prop="jbmSrPc"></el-table-column>
								<el-table-column min-width="110" label="码号收入小计" prop="mhSrPc"></el-table-column>
								<el-table-column min-width="110" label="台阶收入小计" prop="tjSrPc"></el-table-column>
								<el-table-column min-width="110" label="四大主量" prop="sdzlSrPc"></el-table-column>
								<el-table-column min-width="110" label="移动收入" prop="ydSrPc"></el-table-column>
								<el-table-column min-width="110" label="普通宽带" prop="ptkdSrPc"></el-table-column>
								<el-table-column min-width="110" label="互联网专线" prop="hlwzxSrPc"></el-table-column>
                                <el-table-column min-width="110" label="天翼高清" prop="tygqSrPc"></el-table-column>
                                <el-table-column min-width="110" label="固话收入" prop="ghSrPc"></el-table-column>
								<el-table-column min-width="110" label="智慧家庭" prop="zhjtSrPc"></el-table-column>
								<el-table-column min-width="110" label="组网专线" prop="zwzxSrPc"></el-table-column>
								<el-table-column min-width="110" label="设施出租" prop="ssczSrPc"></el-table-column>
								<el-table-column min-width="110" label="物联网" prop="wlwSrPc"></el-table-column>
								<el-table-column min-width="110" label="号百收入" prop="hbSrPc"></el-table-column>
								<el-table-column min-width="110" label="其他收入" prop="qtSrPc"></el-table-column>
                            </el-table-column>
                            <el-table-column label="DICT">
									<el-table-column min-width="110" label="DICT小计" prop="dictSrPc"></el-table-column>
									<el-table-column min-width="110" label="ICT收入" prop="ictSrPc"></el-table-column>
									<el-table-column min-width="110" label="IDC收入" prop="idcSrPc"></el-table-column>
							</el-table-column>
                            <el-table-column label="重点产品">
									<el-table-column min-width="110" label="产业数字化" prop="cyszhSrPc"></el-table-column>
									<el-table-column min-width="110" label="智云护航" prop="zyhhSrPc"></el-table-column>
									<el-table-column min-width="110" label="天翼云" prop="tyySrPc"></el-table-column>
							</el-table-column>
                            <el-table-column label="用户数">
									<el-table-column min-width="110" label="移动出账用户" prop="ydczYhPc"></el-table-column>
									<el-table-column min-width="110" label="宽带计费用户" prop="kdjfYhPc"></el-table-column>
							</el-table-column>
						</el-table-column>
						<el-table-column label="实际生产">
                            <el-table-column min-width="110" label="主营收入合计" prop="zySrSj"></el-table-column>
                            <el-table-column label="基本面">
                                <el-table-column min-width="110" label="基本面小计" prop="jbmSrSj"></el-table-column>
								<el-table-column min-width="110" label="码号收入小计" prop="mhSrSj"></el-table-column>
								<el-table-column min-width="110" label="台阶收入小计" prop="tjSrSj"></el-table-column>
								<el-table-column min-width="110" label="四大主量" prop="sdzlSrSj"></el-table-column>
								<el-table-column min-width="110" label="移动收入" prop="ydSrSj"></el-table-column>
								<el-table-column min-width="110" label="普通宽带" prop="ptkdSrSj"></el-table-column>
								<el-table-column min-width="110" label="互联网专线" prop="hlwzxSrSj"></el-table-column>
                                <el-table-column min-width="110" label="天翼高清" prop="tygqSrSj"></el-table-column>
                                <el-table-column min-width="110" label="固话收入" prop="ghSrSj"></el-table-column>
								<el-table-column min-width="110" label="智慧家庭" prop="zhjtSrSj"></el-table-column>
								<el-table-column min-width="110" label="组网专线" prop="zwzxSrSj"></el-table-column>
								<el-table-column min-width="110" label="设施出租" prop="ssczSrSj"></el-table-column>
								<el-table-column min-width="110" label="物联网" prop="wlwSrSj"></el-table-column>
								<el-table-column min-width="110" label="号百收入" prop="hbSrSj"></el-table-column>
								<el-table-column min-width="110" label="其他收入" prop="qtSrSj"></el-table-column>
                            </el-table-column>
                            <el-table-column label="DICT">
									<el-table-column min-width="110" label="DICT小计" prop="dictSrSj"></el-table-column>
									<el-table-column min-width="110" label="ICT收入" prop="ictSr"></el-table-column>
									<el-table-column min-width="110" label="IDC收入" prop="idcSr"></el-table-column>
							</el-table-column>
                            <el-table-column label="重点产品">
									<el-table-column min-width="110" label="产业数字化" prop="cyszhSrSj"></el-table-column>
									<el-table-column min-width="110" label="智云护航" prop="zyhhSrSj"></el-table-column>
									<el-table-column min-width="110" label="天翼云" prop="tyySrSj"></el-table-column>
							</el-table-column>
                            <el-table-column label="用户数">
									<el-table-column min-width="110" label="移动出账用户" prop="ydczYhSj"></el-table-column>
									<el-table-column min-width="110" label="宽带计费用户" prop="kdjfYhSj"></el-table-column>
							</el-table-column>
						</el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import prefixAPI from "@/api/prefixAPI";
import { getCookie } from "@/common/js/cookie";
import { getSessionStorage } from "@/common/js/storage";
import { $budgetAPI } from "@/api";
import FileSaver from 'file-saver';
import XLSX from 'xlsx';
export default {
    name: "lightEva",
    data() {
        return {
            form: {
                time: '',
				fcDate: '',
            },
            tableData: [],
            tableLoading: false,
			fcDate: [],
        };
    },
    mounted() {
		this.init();
	},
    methods: {
        async init() {
            let that = this;

            that.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
            that.form.areaId = that.accountInfo.areaId;
            that.form.time = await that.getMonth() ;// that.moment().format("YYYYMM");
			that.fcDate = await that.getFC(that.form.time);
			that.form.fcDate = that.fcDate[0];
			that.getData();
        },
        getMonth() {
			return new Promise(resovle => {
				var token = getCookie("token");
				$budgetAPI.getBiasMonth(
					{
						token,
					},
					(res) => {
						this.form.time = res.content;
						resovle(res.content);
						// this.getData();
					}
				);
			})
            
        },
		getFC(time) {
			return new Promise(resovle => {
				$budgetAPI.getBiasList(
					{
						acctMonth: time	
					},
					(res) => {
						
						this.fcDate = res.content;
						resovle(res.content);
					}
				);
			})
			
		},
        getData() {
            var that = this;

            that.tableLoading = true;
            $budgetAPI.getBiasData(
                {
                    acctMonth: that.form.time,
					fcDate: that.form.fcDate,
                },
                (res) => {
					that.tableData = [];
                    if (res && res.code == 0) {
                        that.tableData = res.content;
                    }
                    that.tableLoading = false;
                }
            );
        },
        handle_search() {
			if(!this.form.time || !this.form.fcDate) {
				this.$message.error("请选择账期和版本");
				return false
			}
            this.getData();
        },
		handle_time(val) {
			this.form.time = val;
			this.form.fcDate = '';
			this.getFC(val);
		},
		handle_export() {
			
			var xlsxParam = {
                raw: true,
            }; //转换成excel时，使用原始的格式，这样导出的时候数字过长不会变成科学计数法
            let workbook = XLSX.utils.book_new();
            let ws1 = XLSX.utils.table_to_sheet(
                document.querySelector("#table"),
                xlsxParam
            );
            XLSX.utils.book_append_sheet(workbook, ws1, "预估偏差统计");
            let wbout = XLSX.write(workbook, {
                bookType: "xlsx",
                bookSST: true,
                type: "array",
            });
			if(!this.tableData.length) {
				this.$message.error('暂无数据可导出');
				return false
			}
			this.loading = this.$loading({
				lock: true,
				text: '正在',
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			});
            try {
                FileSaver.saveAs(
                    new Blob([wbout], {
                        type: 'application/octet-stream;charset=utf-8"',
                    }),
                    "预估偏差统计.xlsx"
                );
				this.loading.close();
            } catch (e) {
                if (typeof console !== "undefined") console.log(e, wbOut);
            }
		}
		// hanlde_version(val) {
		// 	this.form.fcDate = val;
		// 	this.getData();
		// }
    },
};
</script>

<style lang="scss" scoped>
.remark {
    padding-top: 5px;
    text-align: left;
    .attention {
        font-weight: bold;
    }
}
.table-content {
    .table-header {
        display: flex;
        justify-content: space-between;
        .table-title {
            font-size: 14px;
            font-weight: bold;
            height: 30px;
            line-height: 30px;
            span {
                display: inline-block;
                width: 5px;
                height: 5px;
                background-color: #418ee9;
                border-radius: 1000%;
                overflow: hidden;
                margin-right: 10px;
                margin-bottom: 3px;
            }
        }
    }
    .content {
        margin-top: 15px;
    }
}
</style>
